<template>
	<div class="orders">
		<div class="div1">
			<aside class="aside1">
				<span><i class="el-icon-notebook-2"> 我的订单详情</i></span>
			</aside>
			<aside class="aside2">
				<el-select v-model="payment" placeholder="付款" style="width: 180px;">
					<el-option value="--请选择--">--请选择--</el-option>
					<el-option value="未付款">未付款</el-option>
					<el-option value="已付款">已付款</el-option>
				</el-select>
				<el-select v-model="shipments" placeholder="发货" style="width: 180px;">
					<el-option value="--请选择--">--请选择--</el-option>
					<el-option value="未发货">未发货</el-option>
					<el-option value="已发货">已发货</el-option>
					<el-option value="已签收">已签收</el-option>
				</el-select>
				<el-select v-model="date" style="width: 180px;">
					<el-option value="--请选择--">--请选择--</el-option>
					<el-option value="7天内">7天内</el-option>
					<el-option value="15天内">15天内</el-option>
					<el-option value="30天内">30天内</el-option>
					<el-option value="60天内">60天内</el-option>
					<el-option value="120天内">120天内</el-option>
				</el-select>
				<el-button @click="find()" type="primary">查询</el-button>
			</aside>
		</div>
		<hr />
		<div class="div3">
			<el-table :data="time" border style="width: 100%;" :expand-row-keys="expand" row-key="ordid">
				<el-table-column type="expand">
					<template slot-scope="props">
					<div class="ord">
						<div v-for="item in props.row.items">
							<div class="ku">
								<img :src="`${$ip}/api/public/showimg/${item.book.pic}`">
								<div class="book-name"><strong>名称:</strong>{{item.book.name}}</div>
								<div class="book-num"><strong>数量:</strong>{{item.num}}</div>
								<div class="book-price"><strong>单价:</strong>{{item.price}}</div>
								<div class="book-stock"><strong>库存:</strong>{{item.book.stock}}</div>
							</div>
						</div>
					</div>
					</template>
				</el-table-column>
				<el-table-column prop="ordid" label="订单号" width="100"></el-table-column>
			    <el-table-column prop="ship2name" label="收货人" width="150"></el-table-column>
			    <el-table-column prop="ship2addr" label="收货地址" width="250"></el-table-column>
				<el-table-column prop="ship2phone" label="电话" width="200"></el-table-column>
				<el-table-column prop="shipno" label="发货单号" width="200"></el-table-column>
				<el-table-column prop="tcreate" label="下单时间" width="150"></el-table-column>
				<el-table-column prop="amount" label="总价" width="150"></el-table-column>
				<el-table-column label="付款" width="110">
					<template slot-scope="scope">
						<span v-show="scope.row.payStatus==0"><el-button type="danger" @click="pay(scope.row.ordid)" style="width: 65px;line-height: 4px;">未付</el-button></span>
						<span v-show="scope.row.payStatus==1" style="color: green;"><strong>已付</strong></span>
					</template>
				</el-table-column>
				<el-table-column label="收货" width="100">
					<template slot-scope="scope">
						<a v-show="scope.row.payStatus == 1 && scope.row.shipStatus == 0" style="color: red;" @click="expandOne(scope.row)">
							<strong>未发</strong>
						</a>
						<span v-show="scope.row.payStatus==0 && scope.row.shipStatus==0" style="color: red;" @click="expandOne(scope.row)"><strong>未发</strong></span>
						<span v-show="scope.row.shipStatus==1"><strong>已发</strong></span>
						<span v-show="scope.row.shipStatus==2" style="color: green;"><strong>已签收</strong></span>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<el-empty v-if="time.length== 0" :image-size="200" description="您还没有订单"></el-empty>
	</div>
</template>

<script>
export default {
	name:'MyOrder',
	data(){
		return{
			payment:[],
			shipments:[],
			date:[],
			user:{},
			orders:[],
			items:[],
			page:{
				num: 1,
				lines: 5,
				total: 0
			},
			expand:[],
			dialogFormVisible: false,
			ship:{}
		}
	},
	computed:{
		time(){
			this.orders.forEach((item)=>{
			let t =new Date();
			let year =t.getFullYear();
			let month =t.getMonth()+1;
			let date =t.getDate();
			let k =`${year}-${month}-${date}`;
			item.tcreate = k;
			console.log(k);
			})
			return this.orders;
		},
		payStaus(){
			return(type)=>{
				switch(type){
				case '未付款':
				 return 0;
				break;
				case '已付款':
				 return 1;
				break;
				}
			}
		},
		shipStatus(){
			return(type)=>{
				switch(type){
				case '未发货':
				 return 0;
				break;
				case '已发货':
				 return 1;
				break;
				case '已签收':
				 return 2;
				break;
				}
			}
		},
		days(){
			return(type)=>{
				switch(type){
				case '7天内':
				 return 7;
				break;
				case '15天内':
				 return 15;
				break;
				case '30天内':
				 return 30;
				break;
				case '60天内':
				 return 60;
				break;
				case '120天内':
				 return 120;
				break;
				}
			}
		},
		shiptime(){
			let s =new Date();
			let year =s.getFullYear();
			let month =s.getMonth()+1;
			let date =s.getDate();
			let num =Math.floor(Math.random()*(100000-1000)+10000);
			this.ship.shipno =`${year}${month}${date}${num}`;
			return this.ship.shipno;
		}
	},
	methods:{
		// 未付款，前往付款
		pay(ordid){
			this.$router.push({path:'/pc/pay',query:{id:ordid}});
			console.log(ordid);
		},
		find(){
			let k ={
				payStaus:this.payStaus(this.payment),
				shipStatus:this.shipStatus(this.shipments),
				days:this.days(this.date),
				account:this.user.username,
				nickname:this.user.ship2name,
				phone:this.user.ship2phone
			}
			this.$postkv("/api/fore/ord/findPageOrders/" + this.page.num + "/" + this.page.lines,k).then((resp)=>{
				this.orders =resp.data.data.orders;
				console.log(this.orders);
			})
		},
		go2add(){
			this.dialogFormVisible=true;
		},
		expandOne(row){
			this.expand=[];
			this.expand.push(row.ordid);
		}
	},
	mounted(){
		this.find();
	}
}
</script>

<style scoped>
a{
	color: white;
}
.orders{
	width: 78%;
	margin: 0 auto;
}
.orders .div1{
	margin-top: 15px;
	display: flex;
	align-items: center;
}
.orders .div1 .aside1 span{
	margin-left: 500px;
}
.orders .div1 .aside2{
	margin-left: 200px;
}
.orders .div1 .aside2 .el-button{
	margin-left: 10px;
}
.orders .div3{
	margin-top: 10px;
}
.orders .div3 .ord{
	width: 60%;
	margin: 0 auto;
}
.orders .div3 img{
	width: 60px;
	height: 60px;
	border-radius: 8px;
}
.orders .div3 .us .ord-account{
	margin-left: 180px;
}
.orders .div3 .us .ord-phone{
	margin-left: 80px;
}
.orders .div3 .us .ord-nickname{
	margin-left: 80px;
}
.orders .div3 .us{
	width: 100%;
	display: flex;
}
.orders .div3 .ku{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
</style>
